import { SwitchField } from '@aws-amplify/ui-react';

import {
  DefaultSwitchFieldExample,
  DisabledSwitchFieldExample,
  SwitchFieldDefaultCheckedExample,
  SwitchFieldErrorExample,
  SwitchFieldIsCheckedExample,
  SwitchFieldLabelExample,
  SwitchFieldLabelHiddenExample,
  SwitchFieldLabelPositionExample,
  SwitchFieldNameExample,
  SwitchFieldOnChangeExample,
  SwitchFieldSizeExample,
  SwitchFieldStylePropsExample,
  SwitchFieldThemeExample,
  SwitchFieldThumbColorExample,
  SwitchFieldTrackCheckedColorExample,
  SwitchFieldTrackColorExample,
  SwitchFieldValueExample,
} from './examples';
import { SwitchDemo, SwitchExample, ChangeExample } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<SwitchDemo />

## Usage

The most basic usage simply includes a SwitchField component passing in a required label prop.

<Example>
  <DefaultSwitchFieldExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultSwitchFieldExample.tsx

    ```

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

### Controlled component

The `SwitchFIeld` can be a controlled component by passing in the controlled boolean value as the `isChecked` prop.
To allow the user to toggle a controlled `SwitchField`, the `onChange` handler must be passed in and update the controlled
value. An example of this pattern is displayed below.

<Example>
  <SwitchFieldIsCheckedExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldIsCheckedExample.tsx

    ```

  </ExampleCode>
</Example>

### defaultChecked

The `defaultChecked` property is a `boolean` value and will define the starting value for an uncontrolled switchField.

<Example>
  <SwitchFieldDefaultCheckedExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldDefaultCheckedExample.tsx

    ```

  </ExampleCode>
</Example>

### thumbColor

The `thumbColor` property is a CSS color value and will define the color of the thumb in the switchField.

<Example>
  <SwitchFieldThumbColorExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldThumbColorExample.tsx

    ```

  </ExampleCode>
</Example>

### trackColor

The `trackColor` property is a CSS color value that will define the color of the track of the switchField while in the off position.

<Example>
  <SwitchFieldTrackColorExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldTrackColorExample.tsx

    ```

  </ExampleCode>
</Example>

### trackCheckedColor

The `trackCheckedColor` property is a CSS color value that will define the color of the track of the switchField while in the on position.

<Example>
  <SwitchFieldTrackCheckedColorExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldTrackCheckedColorExample.tsx

    ```

  </ExampleCode>
</Example>

### isDisabled

The `isDisabled` property is a `boolean` value that when set to true will disable the switchField from being toggled.

<Example>
  <DisabledSwitchFieldExample />
  <ExampleCode>
    ```jsx file=./examples/DisabledSwitchFieldExample.tsx

    ```

  </ExampleCode>
</Example>

### name

The `name` property is a `string` that defines the name of the field that will be submitted with the form as a name/value pair.

<Example>
  <SwitchFieldNameExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldNameExample.tsx

    ```

  </ExampleCode>
</Example>

### size

The `size` property is an `enum` value that modifies the size of the switchField component. The available sizes are `small`, (default), and `large`.

<Example>
  <SwitchFieldSizeExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### label

The `label` property is a required `string` or `ReactNode` that will display next to the switchField component and wrapped in an html label tag.

<Example>
  <SwitchFieldLabelExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldLabelExample.tsx

    ```

  </ExampleCode>
</Example>

### labelPosition

The `labelPosition` property is an `enum` value that defines the label's position in relation to the switchField. Available values are `start`, `end`, `top`, and `bottom`.

<Example>
  <SwitchFieldLabelPositionExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldLabelPositionExample.tsx

    ```

  </ExampleCode>
</Example>

### isLabelHidden

The `isLabelHidden` property is a `boolean` value that will visually hide the label.

<Example>
  <SwitchFieldLabelHiddenExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldLabelHiddenExample.tsx

    ```

  </ExampleCode>
</Example>

### value

The `value` property is a `string` value that defines the value of the field that will be submitted with the form as a name/value pair.

<Example>
  <SwitchFieldValueExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldValueExample.tsx

    ```

  </ExampleCode>
</Example>

### onChange

The `onChange` property is a callback `function` that will be called with a change event to the switchField.

<Example>
  <SwitchFieldOnChangeExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldOnChangeExample.tsx

    ```

  </ExampleCode>
</Example>

### Error state

<Example>
  <SwitchFieldErrorExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldErrorExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="SwitchField">
  <Example>
    <SwitchFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/SwitchFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="SwitchField" />

### Global Styling

To override styling on all SwitchFields, you can set the Amplify CSS variables or use the built-in `.amplify-switchfield` class.

<Example>
  <SwitchField label="This is a switch" className="globally-styled-switchfield" />
  <ExampleCode>
    ```css
    /* styles.css */
    :root {
      --amplify-components-switchfield-default-font-size: 0.5rem;
    }
    /* OR */
    .amplify-switchfield {
      font-size: 0.5rem;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific SwitchField, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <SwitchField label="This is a switch" className="my-custom-switchfield" />
  <ExampleCode>
    ```css
    /* styles.css */
    .my-custom-switchfield {
      font-size: 0.75rem;
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <SwitchField label="This is a switch" className="my-custom-switchfield" />;
    ```

  </ExampleCode>
</Example>

_Using data attributes:_

<Example>
  <SwitchField label="large switchfield" size="large" />
  <ExampleCode>
    ```css
    /* styles.css */
    /* Override only large size styles */
    .amplify-switchfield[data-size='large'] {
      font-size: 2.5rem;
    }
    ```
  </ExampleCode>
  <ExampleCode>
    ```jsx
    import './styles.css';

    <SwitchField label="large switchfield" size="large" />;
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <SwitchFieldStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/SwitchFieldStylePropsExample.tsx

    ```

  </ExampleCode>
</Example>